<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS滚动相册练习</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            /* flex弹性容器 */
            display: flex;
            /* 弹性项目主轴居中 */
            justify-content: center;
            /* 侧轴居中 */
            align-items: center;
            /* 背景颜色 */
            background-color: #f8edf8;
        }

        main {
            /* 网格容器布局 */
            display: grid;
            /* 网格间的间隙是2个字体大小 */
            gap: 2rem;
            /* 网格的列，3列宽度360px，template模板*/
            grid-template-columns: repeat(3,360px);
            /* 清除浮动，hidden隐藏溢出部分 */
            overflow: hidden;
            padding: 50px;
        }

        section {
            display: flex;
            gap: 2rem;
            /* 子元素在父级容器中纵向排列 */
            flex-direction: column;
        }
        /* section:nth-child()是一个伪类选择器，用于选择section的特定子元素 */
        section:nth-child(1),
        section:nth-child(3){
            /*  动画的名字为scroller,速度匀速linear*/
            animation: scroller linear;
            /* 整个页面,动画是滚动的效果 */
            animation-timeline: scroll(root);
            /* 子元素反转排列 */
            flex-direction: column-reverse;
            /* translate()水平和垂直方向的移动距离。 */
            /* 0% 表示元素在水平方向上不移动 */
            /* 100vh 表示视口的高度，-100% 表示元素自身高度的负值 */
            /* calc() 函数来计算元素在垂直方向（y轴）上的移动距离 */
            /* calc(-100% + 100vh) 的结果是将元素向上移动其自身高度的距离，再加上视口的高度 */
            /* 元素将向下移动其自身高度加上整个视口高度的距离。 */
            transform: translate(0%,calc(-100% + 100vh));
        }

        section img {
            /* 水平,垂直,模糊半径,透明度,#000代表黑色，2代表透明度,0完全透明,255完全不透明 */
            box-shadow: 0 0 10px #0002;
            /* 圆角效果 */
            border-radius: 5px;
            /* 过渡动画将持续0.3秒 */
            transition: .3s;
        }
         /* 当用户将鼠标悬停在图片上时，box-shadow会变大，
            颜色会变深（因为透明度降低了），并且图片会稍微放大（transform: scale(1.1); 
            会使图片放大到原来的105%） */
        section img:hover {
            /*scale() 缩放元素 */
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(150,50, 50, 0.5);
        }
        /* 关键帧动画,@keyframes,scroller 是动画的名称*/
        @keyframes scroller {
            /* to：这个关键字指定了动画的结束状态 */
           to{
            /* 元素高度与视口高度之差，元素将向下移动其自身高度的距离。 */
            transform: translate(0%,calc(100% - 100vh));
           } 
        }
    </style>
</head>
<body>
    <main>
        <section>
            <img src="./imgs/1.jpg"/ >
            <img src="./imgs/2.jpg"/>
            <img src="./imgs/3.jpg"/>
            <img src="./imgs/4.jpg"/>
            <img src="./imgs/5.jpg"/>
            <img src="./imgs/6.jpg"/>
            <img src="./imgs/19.jpg"/>
        </section>
        <section>
            <img src="./imgs/7.jpg"/>
            <img src="./imgs/8.jpg"/>
            <img src="./imgs/9.jpg"/>
            <img src="./imgs/10.jpg"/>
            <img src="./imgs/11.jpg"/>
            <img src="./imgs/12.jpg"/>
            <img src="./imgs/20.jpg"/>
        </section>
        <section>
            <img src="./imgs/13.jpg"/>
            <img src="./imgs/14.jpg"/>
            <img src="./imgs/15.jpg"/>
            <img src="./imgs/16.jpg"/>
            <img src="./imgs/17.jpg"/>
            <img src="./imgs/18.jpg"/>
            <img src="./imgs/21.jpg"/>
        </section>
    </main>
</body>
</html>